<template>
  <div class="padding">
    <van-pull-refresh :success-duration="3500" v-model="refreshing"
      @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" :error.sync="error"
        error-text="请求失败，点击重新加载" finished-text="没有更多了" @load="onLoad">
        <ArticleItem v-for="(obj,index) in list" :key="index" :article='obj'>
        </ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from '@/components/article-item'
import { getListAPI } from '@/api/user.js'
export default {
  props: {
    channet: {
      require: true
    }
  },
  data () {
    return {
      list: [],
      timestamp: null,
      loading: false,
      finished: false,
      error: false,
      refreshing: false
    }
  },
  // create () { console.log(this.id) },
  methods: {
    async onLoad () {
      try {
        const res = await getListAPI({ channel_id: this.channet, timestamp: this.timestamp || Date.now(), with_top: 1 })
        // this.list = res.data.data.results
        for (var i = 0; i < res.data.data.results.length; i++) {
          this.list.push(res.data.data.results[i])
        }
        if (Math.random() > 0.5) {
          throw new Error('aaa')
        }
        this.loading = false
        this.timestamp = this.list.pre_timestamp
        if (!res.data.data.results.length) {
          this.finished = true
        }
      } catch (err) {
        this.loading = false
        this.error = true
      }
    },
    async onRefresh () {
      const res = await getListAPI({ channel_id: this.channet, timestamp: Date.now(), with_top: 1 })
      // this.list = res.data.data.results
      for (var i = 0; i < res.data.data.results.length; i++) {
        this.list.unshift(res.data.data.results[i])
      }
      this.refreshing = false
    }
  },
  components: {
    ArticleItem
  }
}
</script>

<style scoped lang="less">
.padding {
  padding-top: 180px;
  .van-list {
    overflow-y: auto;
    height: 80vh;
  }
}
</style>
